<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane label="基础信息" class="form-tabs-tab-pane">
            <!-- 友情链接名称 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.name')" prop="name">
                  <el-input
                    v-model="form.name"
                    :placeholder="$t('links.name_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- logo -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('links.logo_image')"
                  prop="logo_image"
                >
                  <jsp-image-upload
                    :default-list="logo_imageList"
                    @success="handleImageUploadSuccss"
                    @change="handleImageUploadChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 链接地址 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.href')" prop="href">
                  <el-input
                    v-model="form.href"
                    :placeholder="$t('common.href_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 打开方式 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.href_target')"
                  prop="href_target"
                >
                  <el-select
                    v-model="form.href_target"
                    :placeholder="$t('common.href_target_tips')"
                    clearable
                  >
                    <el-option label="本窗口" value="_self" />
                    <el-option label="新窗口" value="_blank" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 链接关系XFN -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.rel')" prop="rel">
                  <el-select
                    v-model="form.rel"
                    :placeholder="$t('common.rel_tips')"
                    clearable
                  >
                    <el-option label="禁止搜索引擎跟踪链接" value="nofollow" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 客户姓名或企业名称 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('links.partner')" prop="partner">
                  <el-input
                    v-model="form.partner"
                    :placeholder="$t('links.partner_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 联系人 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('links.partner_contacts')"
                  prop="partner_contacts"
                >
                  <el-input
                    v-model="form.partner_contacts"
                    :placeholder="$t('links.partner_contacts_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 联系电话 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('links.partner_tel')"
                  prop="partner_tel"
                >
                  <el-input
                    v-model="form.partner_tel"
                    :placeholder="$t('links.partner_tel_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 排序位置 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.sort')" prop="sort">
                  <el-input v-model="form.sort" :placeholder="$t('common.sort_tips')" type="number" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 发布状态 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.status')"
                  prop="status"
                >
                  <el-select
                    v-model="form.status"
                    :placeholder="$t('common.status_tips')"
                    clearable
                  >
                    <el-option label="已发布" value="1" />
                    <el-option label="未发布" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{ $t('common.submit') }}</el-button>
              <el-button @click="resetForm">{{ $t('common.reset') }}</el-button>
              <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import JspImageUpload from '@/components/JspImageUpload'

// export
export default {
  name: 'LinksEdit',
  components: {
    JspImageUpload
  },
  data() {
    return {
      form: {
        id: 0,
        name: '',
        logo_image: '2', // 数字之间逗号隔开
        href: '',
        href_target: '',
        rel: '',
        partner: '',
        partner_contacts: '',
        partner_tel: '',
        sort: 999,
        status: ''
      },
      // 封面图列表: 请求附件接口
      logo_imageList: [
        {
          id: 2,
          name: 'food.jpeg',
          url: 'http://pic.baike.soso.com/p/20130402/20130402143317-1824467319.jpg',
          path: '/uploads/101.jpg'
        }
      ],
      // 表单输入校验 ，通过prop="name"属性进行控制
      rules: {
        name: [
          { required: true, message: '请填写友情链接名称', trigger: 'blur' },
          { min: 2, max: 50, message: '字数在 2-50 个', trigger: 'blur' }
        ]
      },
      // 路由参数
      routerParams: {}
    }
  },
  computed: {},
  created() {
    this.routerParams = this.$route.params
    this.getDetail()
  },
  methods: {
    /** *********************************************** 表单相关 开始 ******************************************************/
    // 内容详情
    async getDetail() {
      if (this.id > 0) {
        // 请求内容接口：数据不存在报异常则关闭当前标签返回上一页
        // 请求附件接口
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 请求内容接口
          console.log(this.form)
          this.$message.success('提交!')
        } else {
          this.$message.error('提交失败!')
          return false
        }
      })
    },
    // 取消/返回
    onCancel() {
      // 删除当前页标签并返回上一页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      // this.$message.info('已取消！')
    },
    // 表单重置
    resetForm() {
      this.$refs['form'].resetFields()
    },
    /** ******************************************* 封面图上传 开始 **************************************************/
    handleImageUploadSuccss(response, file, fileList) {
      console.log('上传成功事件', response, file, fileList)
      // 判断response是否上传成功
      this.$message.success('上传成功')
    },
    handleImageUploadChange(result) {
      console.log('改变事件', result)
      this.logo_image = this.ids
    }
    /** ******************************************* 封面图上传 结束 **************************************************/
  }
}
</script>

<style scoped lang="scss">
</style>
